<template>
  <div class="chart-container">

    <div class="header-box" style="display:flex;justify-content: flex-end">
      <div @click="order">
        <IconAli :sty="{width:'40px',height:'40px',margin:'-2px 0px 0px 0px'}" icon='order-1'></IconAli>
      </div>
      <div @click="add">
        <IconAli :sty="{width:'32px',height:'32px',marginRight:'32px'}" icon='add'></IconAli>
      </div>
    </div>

    <div class="table-box">
      <Table :columns="columns"
             :data="chartList"
             stripe
             border
             :highlight-row="true"
             size=large>

        <template slot-scope="{ row, index }" slot="chartUrl">
          <img :src="row.chartUrl" alt="图片无法正常显示,请重置或联系管理员" title="轮播图" style="width:100px;height:62px"
               @click="viewChart(row.chartUrl)">
        </template>

        <template slot-scope="{ row, index }" slot="linkUrl">
          <a :href="row.linkUrl" target="_blank">{{ row.linkUrl }}</a>
        </template>

        <template slot-scope="{ row, index }" slot="status">
          <i-switch v-model="row.status==1"
                    true-color="#19BE6B" false-color="#ff4949"
                    size="large"
                    @on-change="lock(row)">
            <span slot="open">在用</span>
            <span slot="close">冻结</span>
          </i-switch>
        </template>

        <template slot-scope="{ row, index }" slot="handle">
          <div style="display: flex;justify-content: center;">
            <div @click="update(row)">
              <IconAli :sty="{width:'30px',height:'30px',marginRight:'4px'}" icon='edit'></IconAli>
            </div>
            <div @click="del(row)" v-if="row.userId!=0">
              <IconAli :sty="{width:'30px',height:'30px',marginLeft:'4px'}" icon='sub'></IconAli>
            </div>
          </div>
        </template>

      </Table>

    </div>

    <!--新增轮播图-->
    <Modal
        v-model="addFlag"
        title="新增轮播图"
        width="800px"
        style="padding-right: 20px"
        :mask-closable="false"
        draggable
        sticky
        @on-ok="addOk">

      <el-form label-position="right" label-width="80px" :model="chart">
        <el-form-item label="图片链接">
          <el-input clearable v-model="chart.chartUrl"></el-input>
        </el-form-item>
        <el-form-item label="图片展示">

          <el-upload
              v-if="chart.chartUrl==''"
              action="#"
              :show-file-list="true"
              drag
              list-type="picture-card"
              :on-change="onChange"
              :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>

          </el-upload>

          <div v-if="chart.chartUrl!=''" class="img-box">

            <img ref="img" :src="chart.chartUrl" alt="图片无法正常显示,请确认URL链接是否无误" title="轮播图">

            <div @click="delImg">
              <IconAli :sty="{width:'36px',height:'36px'}" icon='del-red'></IconAli>
            </div>
          </div>


        </el-form-item>

        <el-form-item label="跳转链接">
          <el-input clearable v-model="chart.linkUrl"></el-input>
        </el-form-item>
        <el-form-item label="跳转测试">
          <el-button plain type="primary" icon="el-icon-position" @click="linkTest">跳转</el-button>
        </el-form-item>

      </el-form>

    </Modal>

    <!--删除轮播图-->
    <Modal
        v-model="deleteFlag"
        title="删除轮播图信息"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        style="padding-right: 20px"
        @on-ok="deleteOk">
      <template #header>
        <IconAli :sty="{width:'40px',height:'40px'}" icon='danger' style="margin:6px 0px 0px 16px"></IconAli>
      </template>

      <div style="display:flex;flex-direction:column;margin-left: 16px">
        <div class="delTip">是否删除以下轮播图,此操作不可撤销,请谨慎操作!</div>
        <img ref="img" :src="chart.chartUrl" alt="图片无法正常显示,请确认URL链接是否无误" title="轮播图">
      </div>

    </Modal>

    <!--编辑轮播图-->
    <Modal
        v-model="updateFlag"
        title="编辑轮播图信息"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        style="padding-right: 20px"
        @on-ok="updateOk">

      <el-form label-position="right" label-width="80px" :model="chart">
        <el-form-item label="图片链接">
          <el-input clearable v-model="chart.chartUrl"></el-input>
        </el-form-item>

        <el-form-item label="图片展示">

          <el-upload
              v-if="chart.chartUrl==''"
              action="#"
              :show-file-list="true"
              drag
              list-type="picture-card"
              :on-change="onChange"
              :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>

          </el-upload>

          <div v-if="chart.chartUrl!=''" class="img-box">

            <img ref="img" :src="chart.chartUrl" alt="图片无法正常显示,请确认URL链接是否无误" title="轮播图">

            <div @click="delImg">
              <IconAli :sty="{width:'36px',height:'36px'}" icon='del-red'></IconAli>
            </div>
          </div>


        </el-form-item>


        <el-form-item label="跳转链接">
          <el-input clearable v-model="chart.linkUrl"></el-input>
        </el-form-item>
        <el-form-item label="跳转测试">
          <el-button plain type="primary" icon="el-icon-position" @click="linkTest">跳转</el-button>
        </el-form-item>
      </el-form>

    </Modal>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="chart.chartUrl" alt="">
    </el-dialog>

    <!--轮播图排序-->
    <Modal
        v-model="orderFlag"
        title="请排序"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        @on-cancel="orderChartCancel"
        @on-ok="orderChartOk">

      <div class="header" style="display: flex">
        <div class="tvc index">索引</div>
        <div class="tvc id">主键</div>
        <div class="tvc title">轮播图</div>
      </div>
      <draggable v-model="chartList">
        <div v-for="(obj,i) in chartList" :key="obj.id">
          <div class="content-box" style="display: flex">
            <div class="tvc index">{{ i + 1 }}</div>
            <div class="tvc id">{{ obj.chartId }}</div>
            <img :src="obj.chartUrl" style=" width: 100px;height: 62px;"/>
          </div>
        </div>
      </draggable>

    </Modal>
  </div>
</template>

<script>
import Order from "@/views/common/Order"
import draggable from 'vuedraggable'
import IconAli from "@/views/common/IconAli";

export default {
  //组件名称
  name: "User",
  //组件注册
  components: {IconAli, Order, draggable},
  //数据驱动
  data() {
    return {
      chart: {
        chartId: "",
        fileId: "",
        file: Object, //当前图片
        chartUrl: "",
        linkUrl: "",
        status: "",
        showOrder: "",
      },
      chartList: [],
      columns: [
        {
          type: "index",
          title: '索引',
          resizable: true,
          width: 100,
          align: "center"
        },
        {
          title: '编号',
          key: 'chartId',
          resizable: true,
          width: 300,
          align: "center"
        },
        {
          title: '轮播图',
          key: 'chartUrl',
          resizable: true,
          align: "center",
          slot: "chartUrl"
        },
        {
          title: '跳转链接',
          key: 'linkUrl',
          resizable: true,
          align: "center",
          slot: "linkUrl"
        },
        {
          title: '状态',
          key: 'status',
          resizable: true,
          align: "center",
          slot: 'status',
          width: 140,
          sortable: true
        },
        {
          title: '操作',
          key: 'handle',
          align: "center",
          width: 140,
          slot: 'handle',
        }
      ],
      chartId: "",
      //排序flag
      orderFlag: false,
      //新增 flag
      addFlag: false,
      //删除提示框
      deleteFlag: false,
      //编辑提示
      updateFlag: false,

      //点击轮播图展示
      dialogVisible: false
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    lock(row) {
      let status = row.status;
      let newStatus = 1;
      if (status == 1) {
        newStatus = 0;
      }
      let data = {
        chartId: row.chartId,
        status: newStatus
      }
      this.axios.put(`/chart/chart/chart/status/${row.chartId}`, data)
          .then((data) => {
            this.selectChartList(-1);
            this.$Message.success('轮播图状态修改成功');
          })
    },
    //添加
    add() {
      this.chart = {
        chartId: "",
        fileId: "",
        file: Object, //当前图片
        chartUrl: "",
        linkUrl: "",
        status: "",
        showOrder: "",
      }
      this.addFlag = true
    },
    order() {
      this.orderFlag = true
    },
    //排序取消
    orderChartCancel(){
      this.selectChartList(-1);
    },
    //排序确定
    orderChartOk() {
      let data = []
      for (let i = 0; i < this.chartList.length; i++) {
        data.push(this.chartList[i].chartId)
      }
      this.axios.put(`/chart/chart/chart/order`, data)
          .then((data) => {
            this.selectChartList(-1);
            this.$Message.success('轮播图排序成功');
          })
    },
    onChange(file, fileList) {
      let formData = new FormData();
      formData.append("file", file.raw);
      this.axios.post(`/file/file/file`, formData)
          .then((data) => {
            this.chart.fileId = data.data
            this.axios.get(`/file/fileInfo/file/${data.data}`)
                .then((data) => {
                  this.chart.chartUrl = data.data.url
                })
          })
      return false;
    },
    handleRemove(file) {
      console.log(file);
    },
    delImg() {
      this.chart.chartUrl = ''
    },
    linkTest() {
      window.open(this.chart.linkUrl, '_blank');
    },
    viewChart(chartUrl) {
      this.dialogVisible = true
      this.chart.chartUrl = chartUrl
    },
    //新增确定
    addOk() {
      let data = {
        chartUrl: this.chart.chartUrl,
        linkUrl: this.chart.linkUrl,
        fileId: this.chart.fileId,
      }
      this.axios.post(`/chart/chart/chart`, data)
          .then((data) => {
            this.selectChartList(-1);
            this.$Message.success('轮播图添加成功');
            this.addFlag = false
          })
    },
    //删除
    del(row) {
      this.deleteFlag = true
      this.chart = row
    },
    deleteOk() {
      this.axios.delete(`/chart/chart/chart/${this.chart.chartId}`)
          .then((data) => {
            this.selectChartList(-1);
            this.$Message.success('轮播图删除成功!');
          })
    },
    //编辑
    update(row) {
      //打开面板
      this.updateFlag = true
      this.chart = row
      //根据用户id查询详细信息,将值设入对应位置
      this.axios.get(`/chart/chart/chart/${this.chart.chartId}`)
          .then((data) => {
            this.chart = data.data
          })
    },
    //编辑确定
    updateOk() {
      let data = {
        chartId: this.chart.chartId,
        chartUrl: this.chart.chartUrl,
        linkUrl: this.chart.linkUrl,
      }
      this.axios.put(`/chart/chart/chart/${this.chart.chartId}`, data)
          .then((data) => {
            this.selectChartList(-1);
            this.$Message.success('信息修改成功!');
          })
    },
    selectChartList(status) {
      this.axios.get(`/chart/chart/charts`, {
        params: {
          status: status == null ? -1 : status
        }
      })
          .then((data) => {
            this.chartList = data.data
          })
    },
  },
  created() {
    this.selectChartList(-1);
  },
  //钩子函数
  mounted() {
  },
}
</script>

<style lang="less" scoped>
.chart-container {
  width: 96%;
  margin-top: 20px;
  margin-left: 2%;
}

.delTip {
  font-size: 20px;
  font-weight: bold;
  color: #F00;
}

.nodeTip {
  margin-top: 6px;
  font-size: 16px;
  color: #000;
  font-weight: bolder;
}

.img-box {
  margin-top: 10px;
  border-radius: 6px;
  width: 600px;
  height: 372px;
  cursor: pointer;
  display: flex;

  img {
    border: 1px dashed #409EFF;
    border-radius: 6px;
    display: inline-block;
    width: 100%;
    align-self: stretch;
  }
}

/deep/ .el-upload--picture-card {
  background-color: #FFF;
  border: 1px dashed #FFF;
}

/deep/ .el-upload--picture-card:hover, .el-upload:focus {
  border-color: #FFF;
  color: #FFF;
}

/deep/ .el-upload-dragger:hover, .el-upload-dragger:focus {
  border-color: #409EFF;
  color: #409EFF;
}

/deep/ .el-upload-dragger {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  line-height: 146px;
  vertical-align: top;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: 0;
}

.header {
  display: flex;

  div {
    font-size: 18px;
    color: #000;
    font-weight: bolder;
  }
}

.content-box {
  background-color: #FFF;
  line-height: 26px;
  border-radius: 4px;

  margin-top: 4px;
  display: flex;
}

.index {
  width: 100px;
  border: 1px solid #dbd9d9;
}

.id {
  width: 200px;
  border: 1px solid #dbd9d9;
}

.title {
  text-align: left;
  width: calc(100% - 300px);
  padding-left: 14px;
  border: 1px solid #dbd9d9;
}

</style>